<template>
  <el-dialog
      v-model="visible"
      :title="formType === 'create' ? '新增用户' : '编辑用户'"
      width="600px"
  >
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
      <el-form-item label="登录账户" prop="loginName">
        <el-input v-model="formData.loginName" />
      </el-form-item>

      <el-form-item label="登录密码" prop="loginPassword" v-if="formType === 'create'">
        <el-input
            v-model="formData.loginPassword"
            type="password"
            show-password
            placeholder="请输入6-20位密码"
        />
      </el-form-item>

      <el-form-item label="用户昵称" prop="userName">
        <el-input v-model="formData.userName" />
      </el-form-item>

      <el-form-item label="用户类型" prop="userType">
        <el-select v-model="formData.userType">
          <el-option label="普通用户" value="user" />
          <el-option label="管理员" value="admin" />
        </el-select>
      </el-form-item>

      <el-form-item label="手机号">
        <el-input v-model="formData.phone" />
      </el-form-item>

      <el-form-item label="邮箱">
        <el-input v-model="formData.email" type="email" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="submitForm">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/user'

const props = defineProps({
  visible: Boolean,
  formType: String,
  currentData: Object
})

const emit = defineEmits(['update:visible', 'success'])

const userStore = useUserStore()
const formRef = ref()

// 表单数据
const formData = reactive({
  id: null,
  loginName: '',
  loginPassword: '',
  userName: '',
  userType: 'user',
  phone: '',
  email: ''
})

// 验证规则
const rules = reactive({
  loginName: [
    { required: true, message: '请输入登录账户', trigger: 'blur' },
    { min: 3, max: 20, message: '长度3-20个字符', trigger: 'blur' }
  ],
  loginPassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度6-20个字符', trigger: 'blur' }
  ],
  userName: [
    { required: true, message: '请输入用户昵称', trigger: 'blur' }
  ],
  userType: [
    { required: true, message: '请选择用户类型', trigger: 'change' }
  ]
})

// 监听数据变化
watch(() => props.currentData, (newVal) => {
  if (newVal) {
    Object.assign(formData, {
      id: newVal.id,
      loginName: newVal.loginName,
      userName: newVal.userName,
      userType: newVal.userType,
      phone: newVal.phone,
      email: newVal.email
    })
  }
})

const submitForm = async () => {
  try {
    await formRef.value.validate()

    const res = await userStore.saveOrUpdateUser(formData)

    if (res.success) {
      ElMessage.success(res.message || '操作成功')
      emit('success')
      closeDialog()
    } else {
      ElMessage.error(res.message || '操作失败')
    }
  } catch (error) {
    ElMessage.error('表单提交失败')
  }
}

const closeDialog = () => {
  formRef.value.resetFields()
  emit('update:visible', false)
}
</script>